<template>
    <div class="register">
        <!-- 登录 -->
        <el-form ref="registerFormRef" :model="registerForm" :rules="registerRules" class="register-form" label-width="80px">
            <h2 class="title">用户注册</h2>
            <div class="link" style="margin-bottom: 10px;">
                <el-link class="inner-link" @click="isUserLogin">用户登录</el-link>
            </div>
            <el-form-item prop="account" label="账号">
                <el-input v-model="registerForm.account" prefix-icon="User" autocomplete="off" clearable placeholder="账号"/>
            </el-form-item>
            <el-form-item prop="password" label="密码">
                <el-input v-model="registerForm.password" prefix-icon="Lock" type="password" autocomplete="off" clearable show-password placeholder="密码"/>
            </el-form-item>
            <el-form-item prop="password" label="确认密码">
                <el-input v-model="registerForm.rePassword" prefix-icon="Lock" type="password" autocomplete="off" clearable show-password placeholder="密码"/>
            </el-form-item>
            <el-form-item prop="name" label="姓名">
                <el-input v-model="registerForm.name" autocomplete="off" clearable placeholder="姓名"/>
            </el-form-item>
            <el-form-item prop="mail" label="邮箱">
                <el-input v-model="registerForm.mail" autocomplete="off" clearable placeholder="邮箱"/>
            </el-form-item>
            <el-form-item style="width: 100%">
                <el-button type="primary" style="width: 100%;" @click="doRegister">
                    注册
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { getCurrentInstance, reactive, ref } from 'vue'; // gci：这个函数用于获取当前组件实例的信息
import { useRouter } from 'vue-router'; 
const { proxy } = getCurrentInstance(); // 对象解构赋值 proxy是一个代理对象，提供了对组件实例属性和方法的访问，不需要用this
const router = useRouter(); // 获取路由实例

// 表单相关
const registerFormRef = ref(null)
const registerForm = reactive({})

const isUserLogin = () => {
    proxy.router.push('login')
}

const doRegister = () => {
    // 验证用户输入的登录表单
    registerFormRef.value.validate(async (valid) => {
        if(!valid) {
            return // 如果不通过，直接返回 不执行后面的登录逻辑
        }
        // 使用 Object.assign 创建一个 registerForm 的浅拷贝，确保原始数据不被修改。params 将用于发送请求。
        let params = Object.assign({}, registerForm) 
        // 发送post请求
        let result = await proxy.axios.post('register', params);
        // 如果登录请求失败（result 为 false），返回，停止执行后续代码。
        if(!result) {
            return
        }
        ElMessage.success('注册成功');
        proxy.router.push('login')
    })
}

const registerRules = {
    account: [
        {
            required: true,
            message: '请输入账号'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码'
        }
    ],
    rePassword: [
        {
            required: true,
            message: '请确认密码'
        }
    ],
    name: [
        {
            required: true,
            message: '请输入姓名'
        }
    ],
    mail: [
        {
            required: true,
            message: '请输入邮箱'
        }
    ]
}

</script>

<style lang="scss" scoped>
.register {
    display: flex;
    justify-content: center;
    align-items: center;
    // height: 100%;
    width: 100%;
    // width: 100vw;
    height: 100vh;
    background-color: #707070;
}
.link {
    text-align: right;
}
.title {
    margin: 0px auto 30px auto;
    text-align: center;
    color: #707070;
}
.register-form {
    border-radius: 6px;
    background-color: #ffffff;
    width: 500px;
    padding: 30px 40px 5px 20px;
    .el-input {
        height: 38px;
        input {
            height: 38px;
        }
    }
    .input-icon {
        height: 39px;
        width: 14px;
        margin-left: 20px;
    }
}
</style>